<template>
    <div class="screen screen3">
        <module class="callsource" title="来电渠道分布图" icon="icon-ditu">
            <china :alldata="alldata"></china>
        </module>
        <span style="width: 18px"></span>
        <div class="rmodule">
            <module title="来电渠道排名" icon="icon-12paiming">
                <datatable
                        keyname="来电区域"
                        valname="接入量"
                        :tabledata="rankingData"
                ></datatable>
            </module>
            <span style="height: 14px"></span>
            <module title="来电区域饼图" icon="icon-bingtu">
                <chanelcallrate :chart="chanelcallratedata"></chanelcallrate>
            </module>
        </div>
    </div>
</template>

<script>
    import module from './baseComponents/module'
    import datatable from './baseComponents/datatable'
    import chanelcallrate from './screen3parts/chanelcallrate'
    import china from './screen3parts/china'
    import api from '../api'
    export default {
        name: "screen3",
        components:{
            module,datatable,chanelcallrate,china
        },
        data(){
            return {
                alldata:  [
                    /*{'REGION_NAME': '吉林', 'ACCS_CNT': 123},
                    {'REGION_NAME': '北京', 'ACCS_CNT': 1223},
                    {'REGION_NAME': '上海', 'ACCS_CNT': 2123},
                    {'REGION_NAME': '浙江', 'ACCS_CNT': 4123},
                    {'REGION_NAME': '天津', 'ACCS_CNT': 5544},
                    {'REGION_NAME': '香港', 'ACCS_CNT': 12},
                    {'REGION_NAME': '澳门', 'ACCS_CNT': 456},
                    {'REGION_NAME': '广东', 'ACCS_CNT': 7899},*/
                ],
                rankingData:[
                    /*{key:'渠道一',val:78},
                    {key:'渠道一',val:888},
                    {key:'渠道一',val:75},
                    {key:'渠道一',val:78},
                    {key:'其它',val:56}*/
                ],
                distribution:[],
                chanelcallratedata:{
                    columns: ['地区', '占比'],
                    rows: [
                        /*{ '地区': '北京', '占比': 1393 },
                        { '地区': '上海', '占比': 3530 },
                        { '地区': '内蒙古', '占比': 2923 },
                        { '地区': '江西', '占比': 1723 },
                        { '地区': '广东', '占比': 3792 },
                        { '地区': '其它', '占比': 4593 }*/
                    ]
                }
            }
        },
        methods:{
            //getDistribution
            async refreshThisSc(){
                this.distribution = await api.getDistribution(34);  //获取祖国34个区域来电分布
                this.alldata = this.distribution
                let rankingData = []
                let chanelcallratedata = []
                let total = 0;
                let other = 0;
                for(let i=0; i<this.distribution.length; i++){
                    if(i<5){
                        let item1 = {},item2={};
                        item1['key'] = item2['地区'] = this.distribution[i]['REGION_NAME'];
                        item1['val'] =  parseInt(this.distribution[i]['ACCS_CNT']);
                        rankingData.push(item1)
                        chanelcallratedata.push(item2)
                    }else{
                        other += parseInt(this.distribution[i]['ACCS_CNT'])
                    }
                    total += parseInt(this.distribution[i]['ACCS_CNT'])
                }
                rankingData.push({
                    key:'其它',
                    val:other
                });
                chanelcallratedata.forEach((it,index)=>{
                    it['占比'] = toPercent(rankingData[index].val/total)
                })

                chanelcallratedata.push({
                    '地区':'其它',
                    '占比':toPercent(other/total)
                })
                this.rankingData = rankingData;
                this.chanelcallratedata.rows = chanelcallratedata;

                function toPercent(point){
                    var str=Number(point*100).toFixed(2);
                    str+="%";
                    return str;
                }
            }
        },
        created(){
            this.refreshThisSc();
        }
    }
</script>

<style lang="less" scoped>
    .screen3{
        &>div{
            width: 0;
        }
        &>.callsource{
            flex: 3 1 auto;
        }
        &>.rmodule{
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            &>div{
                height: 0;
                flex: 1 1 auto;
            }
        }
    }
</style>
